<template>
	<div class="main-container">
		<div class="card-container">
			<div class="logo-wrapper">
				<div class="logo-title">南航ITPM同步插件</div>
			</div>
			<a-tabs :activeKey="inputTabKey" @change="(key) => inputTabKey = key">
				<a-tab-pane tab="帐号密码登录" key="username">
				    <div class="form-container">
						<div class="row">
						    <a-input placeholder="账户"  size="large">
						        <a-icon slot="prefix" type="user"/>
						    </a-input>
						</div>
						<div class="row">
						    <a-input placeholder="登录密码" type="password" size="large">
						        <a-icon slot="prefix" type="lock"/>
						    </a-input>
						</div>
						<div class="row">
						    <div class="login-assistance">
						        <a-checkbox>记住用户名</a-checkbox>
						        <a>忘记密码</a>
						    </div>
						</div>
						<div class="row">
						    <a-button type="primary" class="full-width" size="large" @click="login">
								登录
							</a-button>
						</div>
					</div>
				</a-tab-pane>
				<!-- <a-tab-pane tab="手机号登录" key="mobile">
					<div class="form-container">
						<div class="row">
						    <a-input placeholder="手机号" size="large">
						        <a-icon slot="prefix" type="mobile"/>
						    </a-input>
						</div>
						<div class="row">
						    <a-input-group compact>
						        <a-input placeholder="验证码" size="large" style="width: 70%">
						            <a-icon slot="prefix" type="mail"/>
						        </a-input>
						        <a-button size="large" style="width: 30%">获取验证码
						        </a-button>
						    </a-input-group>
						</div>
						<div class="row">
						    <a-button type="primary" class="full-width" size="large" @click="login">登录
						    </a-button>
						</div>
					</div>
				</a-tab-pane> -->
			</a-tabs>
		</div>
	</div>
</template>

<script>
export default{
	data(){
		return {
			inputTabKey: "username",
		}
	},
	methods:{
		login(){
			location.href="index.html";
		}
	}
}
</script>

<style scoped>
.main-container {
	height: 100vh;
    background-color: #F2F3F5;
    position: relative;
}
.card-container {
    text-align: center;
    width: 368px;
    height: 340px;
    background-color: transparent;
    border-radius: 4px;
    margin: 0 auto;
    top: 110px;
    position: relative;
}
.ant-tabs .ant-tabs-top-bar {
    border-bottom: transparent;
    margin-bottom: 0;
}

.card-container .logo-wrapper {
    width: 338px;
    height: 78px;
    margin: 0 auto 40px auto;
}

.card-container .logo-wrapper .logo-title {
    font-size: 32px;
    letter-spacing: 2px;
}
.form-container {
    padding: 24px 0;
}
.form-container .row {
    margin-bottom: 24px;
}
.login-assistance {
    display: flex;
    justify-content: space-between;
}
.full-width {
    width: 100%;
}
</style>